<template>
	<el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
		<SideBar />
		<el-container>
			<el-header style="width: 95%;margin-top: 10px;">
				<HeadBar />
			</el-header>
			<el-main id="main">
				<el-descriptions class="margin-top" title="个人信息" :column="3" border>
					<template slot="extra">
						<el-button type="primary" size="small" @click="this.handlerInfoEdit">操作</el-button>
					</template>
					<el-descriptions-item>
						<template slot="label">
							学号
						</template>
						{{ userInfo.studentId }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							姓名
						</template>
						{{ userInfo.name }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							性别
						</template>
						{{ userInfo.gender }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							出生日期
						</template>
						{{ userInfo.birthdate }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							民族
						</template>
						{{ userInfo.ethnicity }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							籍贯
						</template>
						{{ userInfo.address }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							证件类型
						</template>
						居民身份证
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							证件号码
						</template>
						{{ userInfo.idCardNumber }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							年级
						</template>
						{{ userInfo.grade }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							院系
						</template>
						{{ userInfo.college }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							专业
						</template>
						{{ userInfo.major }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							班级
						</template>
						{{ userInfo.className }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							入学时间
						</template>
						{{ userInfo.enrollmentDate }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							手机电话
						</template>
						{{ userInfo.phoneNumber }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							电子邮箱
						</template>
						{{ userInfo.email }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							紧急联系人
						</template>
						{{ userInfo.emergencyContact }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							紧急联系人电话
						</template>
						{{ userInfo.emergencyContactPhone }}
					</el-descriptions-item>
				</el-descriptions>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeadBar from '@/components/HeadBar.vue'
import request from '@/utils/request'

export default {
	components: { SideBar, HeadBar },
	data() {
		return {
			userInfo: null
		}
	},

	mounted() {
		const studentId = sessionStorage.getItem("studentId");
		console.log('sessionStorage', sessionStorage.getItem("studentId"));
		
		request.get('/student/findByID?studentId=' + studentId).then(res => {
			if (res.data.state == '0') {
				this.userInfo = res.data.data;
				console.log('userInfo', this.userInfo);
			} else {
				this.$message({
					type: "error",
					message: "获取用户信息失败"
				})
			}
		})
	},

	methods: {
		handlerInfoEdit() {
			console.log('handlerInfoEdit', this.userInfo);
			this.$router.push({
				name: 'SelfInfoEditView',
				params: {
					userInfo: this.userInfo
				}
			})
		}
	}

}
</script>

<style scoped>

#main {
	width: 95%;
	margin-top: 30px;
	align-items: center;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin-left: 50px
}
</style>